{% extends "links/base.html" %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% load cache %}

{% block extrahead %}
<link rel="canonical" href="{{ link.get_absolute_url }}" />
<link rel="stylesheet" type="text/css" href="{% static "js-custom-themes/jquery-ui/theme/jquery-ui.css" %}" />
<link href="{% static "js-custom-themes/tagit/theme/jquery.tagit.css" %}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block title %}
{{ link.title }}
{% endblock %}

{% block breadcrumb %}
<li><a href="{% url "home" %}">Home</a></li>
<li><a href="{% url "links" %}">Links</a></li>
<li class="current">{{ link.title }}</li>
{% endblock %}

{% block content %}
  <div class="row">
    <div itemscope itemtype="http://schema.org/Article" class="large-10 small-10 columns">
      {% with tags=link.tags.all %}
      <div>
        {% if request.user.is_authenticated and link.author != request.user %}<i class="pointer fi-page-edit" data-tooltip-title="Suggest tag modification" data-reveal-id="revise-link">edit</i>{% endif %}<p class="tag left"><a href="#"><span class="lang {{ link.get_lang }}">{{ link.get_lang }}</span></a>{% if link.level %}</p><p class="tag left"><a href="#"><span class="level {{ link.level }}">{{ link.level }}</span></a>{% endif %}</p>
        {% for tag in tags %}{% if tag.slug %}
        <p class="tag left"><a href="{% url "tag-single-slug" tag.slug %}"><span itemprop="articleSection" class="t">{{ tag.name }}</span></a></p>
        {% endif %}{% endfor %}
      </div>
      {% endwith %}


      <h3 class="link-title" style="clear:left"><a href="{{ link.get_absolute_url }}" title="Link to the current page"><i class="fi-link"></i></a> <a href="{{ link.url }}" rel="external"><span itemprop="name">{{ link.title }}</span><br><small>{{ link.url }}</small></a></h3>
      <p class="byline">
        {% with author=link.author %}
        by <a href="{% url "user-url" author.username %}"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ author.username }}</span></span></a> |
        <span itemprop="datePublished" content="{{ link.pubdate }}">{{ link.pubdate|timesince }}</span> ago |
        <span class="votes y-bg" data-type="link" data-id="{{ link.id }}"><span class="votes-count"> {{ count }} </span><i class="fi-check{% if voted %}box{% endif %}"></i></span>{% if author == request.user %} | <a href="{% url "link-edit" link_pk=link.pk %}">edit</a>{% endif %}{% if request.user.is_staff %} | <a href="/a/link/link/{{ link.pk }}">ADMIN</a>{% endif %}
        {%endwith%}
      </p>
    </div>
    <div class="large-2 small-2 columns text-right list-symbols">
      <div class="row">
        {% if request.user.is_authenticated %}
        <div class="large-4 columns">
          <a class="symbol" id="vote" data-tooltip title="Upvote this link" data-type="link" data-id="{{ link.id }}"><i class="fi-check{% if voted %}box{% endif %}"></i></a>
        </div>
        <div class="large-4 columns">
          <a class="symbol" id="toread" data-tooltip title="Add to reading list"><i class="fi-page-{% if 'Reading list' in titles %}remove{% else %}add{% endif %}"></i></a>
        </div>
        <div class="large-4 columns">
          <a class="symbol" href="{% url "ajax-own-lists" link.pk %}" data-reveal-id="add-to-list" data-reveal-ajax="true" data-tooltip title="Add to a (new) list"><i class="fi-list-thumbnails"></i></a>
        </div>
        {% else %}
        <div class="large-4 columns">
          <a class="symbol disabled" id="vote" data-tooltip title="Sign in to upvote this link" data-type="link" data-id="{{ link.id }}"><i class="fi-check"></i></a>
        </div>
        <div class="large-4 columns">
          <a class="symbol disabled" id="toread" data-tooltip title="Sign in to add this link to your reading list"><i class="fi-page-add"></i></a>
        </div>
        <div class="large-4 columns">
          <a class="symbol disabled" data-tooltip title="Sign in to add this link to one of your lists"><i class="fi-list-thumbnails"></i></a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

{% if tldr.code != 404 and tldr != False %}
<div class="row">
  <div class="large-12 columns">
    <h5>TL;DR</h5>
    <ul>{% for bul in tldr.summaryBullets %}
      <li>{{ bul }}</li>
    {% endfor %}</ul>
    <p class="byline">
      by <a href="http://tldr.io/{{ tldr.creator.username }}">{{ tldr.creator.username }}</a>, courtesy of <a href="http://tldr.io/">tldr.io/</a>
    </p>
  </div>
</div>
{% endif %}

<div class="row">
  <div class="large-12 columns">
    {% if not user.is_authenticated %}
    <h5>Please sign in to upvote this resource, save it to your reading list</h5>
    <p>and much more !</p>
    {% endif %}
  </div>
</div>

<div class="row">
  <div class="medium-6 columns">
    <h4 class="subheader">as seen in</h4>
    <ul>
    {% for list in lists %}
      <li><a href="{{ list.get_absolute_url }}">{{ list.title }}</a></li>
    {% endfor %}
    </ul>
  </div>
  <div class="medium-6 columns">
    <h4 class="subheader">similar links</h4>
    <ul>
    {% cache 3600 similar_links link.pk %}{% for similar in similars %}
      <li><a href="{{ similar.get_absolute_url }}">{{ similar.title }}</a></li>
    {% endfor %}{% endcache %}
    </ul>
  </div>
</div>

{% if request.user.is_staff %}
<div class="row">
  <div class="large-12 columns">
    <pre>{{ link.content }}</pre>
  </div>
</div>
{% endif %}

  {% if request.user.is_authenticated %}
    <div id="add-to-list" class="small reveal-modal" data-reveal></div>

    <div id="create-list" class="small reveal-modal" data-reveal>
      <span id="create-list-message" class="label" style="display:none"></span>
      {% crispy newlistform %}
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="revise-link" class="small reveal-modal" data-reveal>
      {% crispy reviselinkform %}
      <a class="close-reveal-modal">&#215;</a>
    </div>

  {% endif %}
{% endblock %}


{% block last_body %}
  {% if request.user.is_authenticated %}
<script type="text/javascript" src="{% static "bower_components/jquery-ui/ui/minified/jquery-ui.min.js" %}" ></script>
<script type="text/javascript" src="{% static "bower_components/tag-it/js/tag-it.min.js" %}" ></script>

  <script>
    window.csrfToken = '{{ csrf_token }}';
  </script>
  <script src="{% static "js/votes.js" %}"></script>

  <script type="text/javascript">
  $('#toread').click(function() {
    var icon = $("#toread");
    if (icon.hasClass('waiting')) {
      return null;
    }
    icon.addClass('waiting');
    $.ajax({
      type:"POST",
      url:"{% url "ajax-add-to-list-or-create" %}",
      data: 'csrfmiddlewaretoken={{csrf_token}}&lk={{ link.pk }}&t=toread'
    }).always(function(xhr) {
      console.log(xhr.responseText);
      result = $.parseJSON(xhr.responseText).result;
      if (result == 'added') {
        icon.removeClass('waiting unchecked');
        icon.addClass('checked');
      } else {
        icon.removeClass('waiting checked');
        icon.addClass('unchecked');
      }
    });
  });

  $('#createlist').click(function() {
    var form = $('#createlistform');
    var message = $('#create-list-message');
    var submit = $('#createlist');
    var titlefield = $('#id_title');
    submit.prop('disable', true);
    $.ajax({
      type:"POST",
      url: form.attr('action'),
      data: form.serialize()
    }).always(function(data) {
      var result = $.parseJSON(data.responseText).result;
      console.log(data.responseText)
      console.log(result)
      if (result == 'success') {
        titlefield.removeClass('error');
        message.text('Success !');
        message.removeClass('alert').addClass('success');
        submit.prop('disable', false);
        submit.text('Create another list');
        $('#createclose').show();
      } else if(result == 'invalid') {
        message.text('Please give your list a title.');
        titlefield.addClass('error');
        message.removeClass('success').addClass('alert');
        submit.prop('disable', false);
      } else {
        message.text('Error.');
        message.removeClass('success').addClass('alert');
        submit.prop('disable', false);
      }
      message.show();
    });
  });

  $("#createclose").click(function() {
    $(this).foundation('reveal', 'close');
  });

  $(document).foundation('tooltip', {"disable-for-touch": true});

  $('#edit-tag-form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      type:"POST",
      url: "{% url 'revise-link' link.pk %}",
      data: $(this).serialize()
    }).always(function(xhr) {
      console.log(xhr.responseText);
      result = $.parseJSON(xhr.responseText).result;
      if (result == 'success') {
        $('#revise-link').foundation('reveal', 'close');
      }
    });
  });

  $(function(){
    $("#id_tags").tagit({
      availableTags: [{{ tags|safe }}],
      autocomplete: {delay: 0, minLength: 2},
      allowSpaces: true
    });
  });
  </script>
  {% endif %}
{% endblock last_body %}
